<!-- 广场 - 课程 - 购买课程 -->
<template>
  <view class="px-4">
    <view class="flex mt-4 mb-3 py-4 px-4 bg-#f6f6f6 rounded-lg ">
      <view class="relative">
        <view class="label-style">线上课程</view>
        <u-image :src="state.data?.cover_image"  width="240" height="160" border-radius="12" />
      </view>
      <view class="flex flex-col justify-between">
        <view class="c-#333 text-32">{{ state.data?.class_name || '' }}</view>
        <view class="c-#FF513A text-40">￥{{ numFormat(state.data?.price || 0) }}</view>
      </view>
    </view>
    <u-line></u-line>
    <view class="c-#333 text-40 py-4 font-semibold">购买须知</view>
    <view class="c-#666 text-28 leading-5">
      <view>· 你将购买的商品为虚拟内容服务，购买后不支持退订、转让、退换，请斟确认。</view>
      <view class="mt-2.5">· 购买后可在“我的-我的订单”中查看或使用。</view>
    </view>
  </view>
  <view class="h-200"></view>
  <!--底部按钮-->
  <view class="flex bottom-wrap-16 w-full bg-#fff border-top px-4">
    <view class="flex-1 c-#FF513A text-36">￥{{ numFormat(state.data?.price || 0) }}</view>
    <view class="flex flex-shrink-0">
      <view class="button-pay" @click="onSubmit">确认支付</view>
    </view>
  </view>
</template>
<script setup>
import { showModal, showToast } from "@/common/util/uni"
import { wxPay } from "@/common/util/wx"
import { refreshPrePage } from "@/common/util/util"
import { numFormat } from "@/common/util/format"
import { getOnlineCourseDetail, postOnlineCourseBuy } from '@/common/http/module/square'

const state = reactive({
  id: '',
  data: '',
})

function loadData() {
  getOnlineCourseDetail(state.id).then(res => {
    state.data = res.data
  })
}

function onSubmit() {
  showModal({
    content: '确定要购买该课程吗?',
    success: ({ confirm }) => {
      if (!confirm) return
      postOnlineCourseBuy(state.id).then(res => {
        wxPay(res.data).then(() => {
          showToast('购买成功')
          refreshPrePage('refresh')
          setTimeout(() => {
            uni.navigateBack()
          }, 600);
        }).catch(() => showToast('支付失败', 'error'))
      })
    }
  })
}

onLoad(options => {
  state.id = options.id
  loadData()
})
</script>

<style lang="scss" scoped>
.border-top {
  border-top: 2rpx solid #eee;
}

.label-style {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120rpx;
  height: 40rpx;
  position: absolute;
  z-index: 1000;
  border-radius: 12rpx 0px 12rpx 0px;
  opacity: 0.75;
  color: #fff;
  font-size: 22rpx;
  background-color: #F4AF22;
}

.button-pay {
  width: 400rpx;
  height: 68rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10rpx;
  background-color: #F4AF22;
  color: #fff;
  font-size: 28rpx;
}
</style>
